import { useEffect, useRef } from "react";
import styles from "./index.module.scss";
import initOption from "./options";
import * as echarts from "echarts";
import { useSelector, useDispatch } from "react-redux";
import { setLayers } from "@/store";
 

export default function EchartsEL(props) {
  const chartRef = useRef();
  const { textColor, seriesData, colorArr, legendArr } = props;
  const theme = useSelector((state) => state.theme);
  const dispatch = useDispatch();
  useEffect(() => {
    const option = initOption(textColor, seriesData, colorArr, legendArr);
    const chart = echarts.init(chartRef.current);
    const openModel = (name) => {
      dispatch(
        setLayers({
          query: {},
          name,
          other: {},
        })
      );
    };
    chart.on("click", (params) => {
      openModel("model28")
      console.log(params);
    });
    chart.setOption(option);
    return () => {
      chart.dispose();
    };
  }, [theme]);
  return (
    <>
      <div id="main" ref={chartRef} className={styles.echarts}></div>
    </>
  );
}
